<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<!--请适当使用搜索功能，检索href="#",查找当前空缺接口-->
<head>
    <!--  防止乱码-->
    <meta charset="utf-8">
    <!--  提升网页兼容性-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="Shortcut Icon" th:href="@{/img/Fan_logo_alpha.png}" type="image/x-icon"/>
    <link rel="icon" th:href="@{/img/Fan_logo_alpha.png}" sizes="32x32" type="image/png">
    <link rel="icon" th:href="@{/img/Fan_logo_alpha.png}" sizes="16x16" type="image/png">
    <title>文章修改界面</title>

    <!-- 自定义字体-->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!-- 自己的css-->
    <link th:href="@{/css/myWeb-min.css}" rel="stylesheet">
    <!--    bootstrap4.5的table渲染css-->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <link th:href="@{/css/uploadImageBox.css}" rel="stylesheet">
    <style>
        /*去除a标签的所有效果*/
        /*包含以下四种的链接*/
        a {
            text-decoration: none;
        }

        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
        }

        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
        }

        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;
        }

        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
        }
    </style>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        img {
            display: inline-block;
            height: auto;
            max-width: 100%;
        }

        /*响应String中的回车符*/
        #blogContent {
            white-space: pre-line;
        }

        #blogContent iframe {
            display: inline-block;
            height: 720px;
            max-width: 100%;
            width: 1080px;
        }

        #comment {
            white-space: pre-line;
        }

        #comment img {
            display: inline-block;
            height: auto;
            max-width: 20%;
        }

        code div {
            background: #e2e2e2;
            border-left: 5px solid #b7cfcf;
        }
        pre {
            background: #e2e2e2;
            border-left: 5px solid #b7cfcf;
        }

        #blogContent table {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #blogContent table td, #blogContent table th {
            font-size: 1em;
            border: 1px solid #c7e2e5;
            padding: 3px 7px 2px 7px;
        }

        #blogContent table th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #6ecbcf;
            color: #ffffff;
        }

        #blogContent table tr.alt td {
            color: #000000;
            background-color: #eaf2d3;
        }

        #commentBlock iframe {
            display: inline-block;
            height: 480px;
            max-width: 100%;
            width: 720px;
        }
        .w-e-toolbar{
            flex-wrap:wrap;
        }
    </style>
</head>

<body id="page-top">

<!-- 页面整体 -->
<div id="wrapper">

    <!-- 侧边栏 -->
    <!-- 侧边栏到此为止啦 -->

    <!-- 接下来是主内容区域 -->
    <div id="content-wrapper" class="d-flex flex-column">
        <!-- 主内容 -->
        <div id="content">

            <!-- 顶部头条内容 -->
            <div th:replace="/common/module.html::navBar"></div>
            <!-- 顶栏到此为止 -->

            <!-- 主页内容 -->

            <main role="main" class="container">
                <div class="d-flex align-items-center p-3 my-3 bg-light-green rounded shadow-sm border-left-warning">
                    <!--   <img class="mr-2" src="img/qmx_icon_w.png" width="52" height="52" alt="qmx">-->
                    <div class="lh-125 w-100">
                        <h4 class="lh-125 d-block"><span>修改投稿</span></h4>
                        <div class="mr-2">
                            <span>该文章的上传用户：</span>
                            <span th:text="${author.nickname}"></span>
                        </div>
                    </div>
                </div>

<!--                投稿区域-->
                <div class="my-3 p-3 bg-white rounded shadow-sm">
                    <div class="mb-3 border-gray pb-2" id="blogContent"></div>
                    <hr/>
                    <div id="commentThisPostArea" class="mr-2 mt-6 animated--grow-in" style="padding-top: 10px;">
                        <form enctype="multipart/form-data" id="submission_form" method="post" action="/submission/editSubmission">
                            <input class="d-none" th:value="${article.id}" name="id" />
                            <input class="d-none" th:value="${article.createBy.id}" name="createBy" />
<!--                            富文本编辑框-->
                            <div class="form-group">
                                <span class="ml-3 mr-3">文章标题：</span>
                                <input type="text" class="form-control form-control-user"
                                       name="title" th:value="${article.title}"
                                       placeholder="请输入文章标题">
                            </div>

                            <!-- 上传帖子首图的部分 -->
                            <div class="article-avatar-box">
                                <span class="ml-2 mr-3">请上传帖子首页主图（支持.png .jpg .jpeg）</span>
                                <div class="avatar-upload">
                                    <div class="avatar-edit">
                                        <!-- input标签，用来保存提交的文件 -->
                                        <input type='file' id="imageUpload" name="mainImage" accept=".png, .jpg, .jpeg" value="图片"/>
                                        <!-- 上传的按钮 -->
                                        <label for="imageUpload">
                                            <span style="margin: auto;" class="fa fa-file-upload fa-2x mt-2"></span>
                                        </label>
                                    </div>
                                    <div class="avatar-preview">
                                        <!-- 读取上传的图片文件可以临时在此处展示，默认情况下，展示下方这个url https://s1.ax1x.com/2022/05/18/OTH5nK.png -->
                                        <div id="imagePreview" th:style="'background-image: url(/system/article/picture?p='+${article.getMainPicture()}+');'">
<!--                                            <img class="h-100 w-auto" th:src="@{'/system/article/picture?p='+${article.getMainPicture()}}" alt="帖子主图">-->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div style="position: relative;z-index: 10;" id="editDiv" onmouseout="updateCommentText(this);"></div>
<!--                            真正上传的文本框-->
                            <textarea id="ArticleTextArea" class="form-control d-none overflow-hidden"
                                      type="text" rows="1" name="content" placeholder="..." ></textarea>
                            <div id="origin_Article" class="d-none overflow-hidden" >
                                <span th:utext="${article.content}">
                                </span>
                            </div>
                            <div class="btn-group float-right mt-1 ml-1">
                                <button class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
                                    <span class="buttonText">投稿分类：</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" style="z-index: 10001;position: relative;">
                                    <li><a class="btn btn-sm btn-outline-info text-info w-75 mb-1 ml-2" onclick="selectArticleClass($(this).text(),1)">前后台技术</a></li>
                                    <li><a class="btn btn-sm btn-outline-info text-info w-75 mb-1 ml-2" onclick="selectArticleClass($(this).text(),2)">计算机软件</a></li>
                                    <li><a class="btn btn-sm btn-outline-info text-info w-75 mb-1 ml-2" onclick="selectArticleClass($(this).text(),3)">计算机硬件</a></li>
                                    <li><a class="btn btn-sm btn-outline-info text-info w-75 mb-1 ml-2" onclick="selectArticleClass($(this).text(),4)">其他</a></li>
                                </ul>
                            </div>
                            <input id="ArticleClass" class="form-control d-none overflow-hidden"
                                   type="text" rows="1" name="articleClass" placeholder="..." th:value="${article.getArticleClass()}" />
<!--                            这个按钮会触发投稿弹出界面-->
                            <button type="button" class="btn btn-outline-warning mt-1 mb-5 float-right ml-1" data-toggle="modal" data-target="#SubmitTips">
                                修改稿件内容
                            </button>
<!--                            <button onclick="cancelComment(this);" class="btn btn-outline-secondary mt-1 mb-5 float-right" type="button">取消</button>-->
                            <div class="mt-5 mb-0" style="width: auto;height: 1px; background: #e5e5e5;"></div>
                        </form>
                    </div>

                    <!--        修改此贴的form-->
<!--                    <div id="modifyThisPostArea" class="mr-2 d-none mt-6 animated&#45;&#45;grow-in" style="padding-top: 10px;">-->
<!--                        <form action="/updataPosting" method="post">-->
<!--&lt;!&ndash;                            <input th:value="${posting.getPostingid()}" name="postingid" style="display:none;">&ndash;&gt;-->
<!--&lt;!&ndash;                            <input class="form-control mb-1" th:value="${posting.getPostingtitle()}" name="postingtitle">&ndash;&gt;-->
<!--                            <div id="modifyEditDiv" onmouseout="updateCommentText(this);"></div>-->
<!--                            <textarea class="form-control d-none overflow-hidden" type="text" rows="4" name="postingcontent" placeholder="..."></textarea>-->
<!--                            <button class="btn btn-outline-danger mt-1 mb-5 float-right ml-1" type="submit">确定修改</button>-->
<!--                            <button onclick="cancelComment(this);" class="btn btn-outline-secondary mt-1 mb-5 float-right" type="button">取消</button>-->
<!--                            <div class="mt-5 mb-0" style="width: auto;height: 1px; background: #e5e5e5;"></div>-->
<!--                        </form>-->
<!--                    </div>-->
                </div>
            </main>
        </div>
        <!-- 主体内容结束-->
<!--        <div style="display: none" id="temp">-->
<!--            <input id="postingid" th:value="${posting.getPostingid()}">-->
<!--            <input id="userid" th:value="${session.loadUser.id}">-->
<!--            <input id="username" th:value="${session.loadUser.username}">-->
<!--        </div>-->
        <!-- 页脚 -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright &copy; 技术FAN 2022 - 鄂ICP备15002584号</span>
                </div>
            </div>
        </footer>
        <!--页脚也就这么点点-->

    </div>
    <!-- 总内容也就这么多了-->

</div>
<!--主体的区域结束了，接下来就是弹窗的div等部分-->

<!-- 回到最上-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!--删除提示-->
<div class="modal fade" id="SubmitTips" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content text-center items-center">
            <div class="modal-header text-center">
                <h5 class="modal-title text-danger" id="exampleModalLabel"><i class="fas fa-exclamation-circle mr-1"></i>注意：</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div id="SubmitTipsContent" class="modal-body m-0">是否确认修改？</div>

            <div class="modal-footer" id="deleteInfoFooter">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <button class="btn btn-info" form="submission_form" type="submit">确定修改</button>
            </div>

        </div>
    </div>
</div>

<!-- 弹窗 -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="LogoutModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="LogoutModalLabel">注意</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">确定要退出登录吗?</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" href="/logout">确定</a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>
<!-- 自己的js文件-->
<script th:src="@{/js/wangEditor/wangEditor.js}"></script>
<script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/js/getInformation.js}"></script>
<script th:src="@{/js/uploadImage.js}"></script>

<script>
    //修改就不需要投稿须知了
    // function getSubmitTips() {
    //
    //     $.ajax({
    //         url:"/system/submitTips/get",
    //         type:"get",
    //         data:{
    //             id:$("#SubmitTipsContent").val(),
    //         },
    //         success:function(data){
    //             // 01表示后台有投稿须知，02表示后台没有写，采用默认的即可
    //             //console.log(data["submitTips"]);
    //             if(data["respCode"]==="01"){
    //                 $("#SubmitTipsContent").html(data["submitTips"].remark);
    //             }
    //         }
    //     })
    // }
    // (function (){
    //     getSubmitTips();
    // }());

    function commentThisPosting(obj){
        $(obj).addClass("d-none");
        $('#commentThisPostArea').removeClass("d-none");
    }

    function like(obj,type,commentid,userid,username){
        $.post("/commentlike?userid=" + userid + "&username=" + username + "&commentid=" + commentid, function (data) {
            //type 0是comment 1是commenttocomment的现在未添加楼中楼点赞
            let msg = data.msg;
            console.log(msg);
            var nowLikesNum =  $(obj).children('small').text();
            if (msg === "点赞成功") {
                nowLikesNum++;
                $(obj).children('i').removeClass("fa-thumbs-up").addClass("fa-thumbs-down");
                $(obj).children('small').text(nowLikesNum)
                $(obj).children('i').text("取消")
            } else if (msg === "取消点赞") {
                nowLikesNum--;
                $(obj).children('i').removeClass("fa-thumbs-down").addClass("fa-thumbs-up");
                $(obj).children('small').text(nowLikesNum)
                $(obj).children('i').text("点赞")
            }
        });
    }
    function selectArticleClass(a,value) {
        $('.buttonText').text(a);
        $('#ArticleClass').val(value);
    }
    function follow(obj,userid,username,followid,followname){
        let msg = $(obj).text();
        $.post("/follow?userid=" + userid + "&username=" + username + "&followid=" + followid +"&followname="+followname, function (data) {
            let msg = data.msg;
            console.log(msg);
            if (msg === "关注成功") {
                $("."+followname).each(function (i, n) {
                    $(this).text("取消关注");
                })
            } else if (msg === "取消关注") {
                $("."+followname).each(function (i, n) {
                    $(this).text("关注");
                })
            }
        });
    }
    function openComment(obj) {
        if($(obj).parent().next().is(':hidden')){
            $(obj).parent().next().show();
        }else{
            $(obj).parent().next().hide();
        }
    }
    function changeCommentBtn(obj){
        let commentArea = $(obj).parent().parent().prev().prev();
        let changeCommentArea = $(commentArea).next();
        let commentStr = $(commentArea).html();
        let inputArea =  $(changeCommentArea).children().first().children().first();
        $(commentArea).removeClass("d-block").addClass("d-none");
        $(changeCommentArea).removeClass("d-none").addClass("d-block");
        $(inputArea).html(commentStr);
        //alert($(commentArea).html());
    }
    function cancelChangeCommentBtn(obj){
        $(obj).parent().parent().prev().removeClass("d-none").addClass("d-block");
        $(obj).parent().parent().removeClass("d-block").addClass("d-none");
    }

    function updateCommentText(obj){
        let wangEditorStr = "";
        if($(obj).attr("id")==="editDiv"){
            wangEditorStr = $('#editDiv .w-e-text').html();
        }else if($(obj).attr("id")==="modifyEditDiv"){
            wangEditorStr = $('#modifyEditDiv .w-e-text').html();
        }
        $(obj).next().html(wangEditorStr);
    }
</script>

<script>
    // 删除提示
    function deleteInfoFun(obj){
        let deleteATag = $(obj).next();
        let deleteUrl = $(deleteATag).attr('href');
        let deleteFooter = $('#deleteInfoFooter').html();
        deleteFooter='<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button><a class="btn btn-danger" href="'+deleteUrl+'">确定删除</a>';
        $('#deleteInfoFooter').html(deleteFooter);
    }
    function commentThisPosting(){
        $('#commentThisPostBtnArea').addClass("d-none");
        $('#commentThisPostArea').removeClass("d-none");
    }
    function cancelComment(obj){
        $(obj).parent().parent().addClass("d-none");
        $('#commentThisPostBtnArea').removeClass("d-none");
    }
    function modifyThisPosting(){
        $('#commentThisPostBtnArea').addClass("d-none");
        $('#modifyThisPostArea').removeClass("d-none");
        let modifyPostStr = $('#blogContent').html();
        $('#modifyEditDiv .w-e-text').html(modifyPostStr);
    }
</script>
<script type="text/javascript">

    var userid =$('#userid').val();
    var username = $('#username').val();
    var postingid = $('#postingid').val();

    $(document).ready(function () {
        console.log("准备生成富文本框");
        // let Edit = window.wangEditor;
        // let editorDiv = new Edit('#editDiv');
        // funcWang();
        const editorDiv = window.wangEditor;
        const editor = new editorDiv("#editDiv")
        // 或者 const editor = new E(document.getElementById('div1'))
        editor.create()
        // alert("已创建编辑框");
        //editorDiv.create();

        // let modifyEdit = window.wangEditor;
        // let modifyEditorDiv = new modifyEdit('#modifyEditDiv');
        // modifyEditorDiv.create();

        if ($('#userID').text() === $('#thisPageUserID').text() || $('#NowUserClass').text() === "5") {
            $('#modifyThisPostBtn').removeClass('d-none');
            // alert("已更改按钮显示"+$('#NowUserClass').text());
        }

        //将需要修改的内容复制到富文本编辑中
        let article_content = $('#origin_Article').html();
        $('#editDiv .w-e-text').html(article_content);


        function add0(m) {
            return m < 10 ? '0' + m : m
        }});


</script>

<script>
    function add0(m) {
        return m < 10 ? '0' + m : m
    }

    function dateformat(timestamp) {
        //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
        var time = new Date(timestamp);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return year + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds);
    }
    function openOptBtn(obj){
        if($(obj).hasClass('btn-outline-secondary')){
            $(obj).removeClass('btn-outline-secondary').addClass('btn-outline-success');
            $(obj).children().first().removeClass('fa-toggle-off').addClass('fa-toggle-on');
            $(obj).parent().next().removeClass('d-none');
        }else{
            $(obj).addClass('btn-outline-secondary').removeClass('btn-outline-success');
            $(obj).children().first().addClass('fa-toggle-off').removeClass('fa-toggle-on');
            $(obj).parent().next().addClass('d-none');
        }
    }
    (function ($) {
        "use strict";

        // 侧边栏导航的开合
        $("#sidebarToggle, #sidebarToggleTop").on('click', function (e) {
            $("body").toggleClass("sidebar-toggled");
            $(".sidebar").toggleClass("toggled");
            if ($(".sidebar").hasClass("toggled")) {
                $('.sidebar .collapse').collapse('hide');
            }
        });

        // 当窗口尺寸小于768px等等条件时，缩小侧边栏以及下拉菜单或者搜索栏等等
        $(window).resize(function () {
            if ($(window).width() < 1380) {
                $('.sidebar .collapse').collapse('hide');
            }

            // 窗口尺寸小于480px等等条件时，关闭侧边栏以及下拉菜单或者搜索栏等等
            if ($(window).width() < 1375 && !$(".sidebar").hasClass("toggled")) {
                $("body").addClass("sidebar-toggled");
                $(".sidebar").addClass("toggled");
                $('.sidebar .collapse').collapse('hide');
            }
            if ($(window).width() < 1600) {
                $(".sidebar").addClass("toggled");
            } else {
                $(".sidebar").removeClass("toggled");
            }
        });

        // 当侧边导航栏被固定的时候，防止滑动页面时出排版bug
        $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function (e) {
            if ($(window).width() > 920) {
                var e0 = e.originalEvent,
                    delta = e0.wheelDelta || -e0.detail;
                this.scrollTop += (delta < 0 ? 1 : -1) * 30;
                e.preventDefault();
            }
        });

        // 滚动到顶部按钮的浮现
        $(document).on('scroll', function () {
            var scrollDistance = $(this).scrollTop();
            if (scrollDistance > 100) {
                $('.scroll-to-top').fadeIn();
            } else {
                $('.scroll-to-top').fadeOut();
            }
        });
        // 搭配jQuery实现返回顶部平滑的移动
        $(document).on('click', 'a.scroll-to-top', function (e) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: ($($anchor.attr('href')).offset().top)
            }, 1000, 'easeInOutExpo');
            e.preventDefault();
        });
        // 当未读取用户名时隐藏整个用户信息
        $(function () {
            if (!$('#userName').html()) {
                $('#user-area,#newEmailButton,#newMsgButton').hide();
                $('#login-button').show();
                $('#checkIn').hide();
            } else {
                $('#checkIn').show();
                $('#login-button').hide();
            }
        });
        $('#sidebarToggleTop').hide();
    })(jQuery);
</script>

</body>

</html>